<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">奢总汇个人卖家</view>
			<input type="number" v-model="tel" placeholder="请输入手机号" />
			<view class="tips">未注册的手机号验证后自动创建奢总汇账号</view>
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
			<view class="alternative">
				<view class="password" @click="login">密码登录</view>
				<view class="issue" @click="register">立即注册</view>
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<button class="wechat item" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					withCredentials="true" hover-class="none" >
					<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
					微信
				</button>
				<view class="QQ item">
					<view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
					QQ
				</view>
			</view>
			<!-- <view class="btn">
				<u-button type="primary" @click="goto">下一步</u-button>
			</view> -->
			<!-- <view class="hint">

				<checkbox></checkbox>
				登录代表同意

				<text class="link">奢总汇用户协议、隐私政策，</text>
				并授权使用您的奢总汇点评账号信息（如昵称、头像、收获地址）以便您统一管理
			</view> -->
		</view>
		<u-toast ref="notice"></u-toast>

	</view>
</template>

<script>
export default {
	onLoad(option) {
		this.type = option.type ? option.type : "seller"
		// console.log(this.type)


	},
	data() {
		return {
			tel: '',
			type: "",
		}
	},
	computed: {
		inputStyle() {
			let style = {};
			if (this.tel) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['success'];
			}
			return style;
		}
	},
	methods: {

		getPhoneNumber(mobile) {

			let that = this
			if (mobile.detail.errMsg.trim() == "getPhoneNumber:ok") {
				// 调用 uni.showModal() 或者 uni.showPopup() 方法弹出层来提示用户进行手机号授权操作
				uni.showModal({
					title: '获取手机号授权',
					content: '请确认授权',
					success: function (res) {
						if (res.confirm) {

							//调用微信小程序的授权登录接口

							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								fail: () => {
									this.$refs.notice.show({
										type: 'error',
										message: '您拒绝了授权'
									})
								},
								success: (info) => {

									uni.login({
										provider: 'weixin',
										success: async (result) => {


											uni.request({
												url: uni.getStorageSync('URL') + 'home/user/user/login',
												method: 'POST',
												data: {
													logincode: result.code,
													phonecode: mobile.detail.code,
													encryptedDataStr: mobile.detail.encryptedData,
													iv: mobile.detail.iv,
													avatar: info.userInfo.avatarUrl,
													nickname: info.userInfo.nickName
												},
												header: {
													"X-Requested-With": "XMLHttpRequest"
												},
												dataType: 'json',
												success: (res) => {

												

													that.$refs.notice.show({
														type: 'success',
														message: '授权登录成功',
														duration:600,
														complete:()=>{
															uni.$u.route({
																url:"pages/test/seller",
																params:{
																	phone: res.data.data.mobile,
																	flag:"wechat"
																}
															})
														}
													})

												},
												fail: (res) => {
													that.$refs.notice.show({
														type: 'danger',
														message: '授权登录失败',
														duration: 2000,
													})
												}

											});







										},
										fail: () => {
											this.$refs.notice.show({
												type: 'error',
												message: '授权登录临时凭证获取失败'
											})
										}
									})
								}
							})
							// console.log(e)
						} else {
							// 用户点击取消按钮
							// 处理取消获取手机号的情况
							this.$refs.notice.show({
								type: "success",
								message: "已取消获取手机号"
							})
						}
					}
				});

			}




		},
		// sq() {
		// 	uni.$u.route({
		// 		url: "pages/user/face",
		// 		params: {
		// 			type: "seller"
		// 		}
		// 	})
		// },
		login() {
			uni.$u.route({
				url: "pages/user/login",
				params: {
					type: "seller"
				}
			})
		},
		goto() {
			uni.$u.route({
				url: "pages/user/checkcode",
				params: {
					type: "seller",
					phone: this.tel

				}
			})
		},
		submit() {
			if (this.tel.trim().length === 0) {

				this.$refs.notice.show({
					type: "error",
					message: "手机号不能为空",
					duration: 1200,

				})

			} else {
				if (this.$u.test.mobile(this.tel)) {

					this.goto()

				} else {

					this.$refs.notice.show({
						type: "error",
						message: "手机格式有误，请重新输入",
						duration: 1200,

					})
				}
			}
		},
		register() {
			uni.$u.route({
				url: "pages/user/userform",
				params: {
					type: "seller"
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.btn {
	width: 70%;
	margin: 20px auto;
}

.issue {
	color: #3c9cff;
}

.password {
	color: #3c9cff;
}

.wrap {
	font-size: 28rpx;

	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}

		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}

		.tips {
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}

		.getCaptcha {
			background-color: #3c9cff;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;

			&::after {
				border: none;
			}
		}

		.alternative {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}

	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;

			.wechat::after {
				border: none;
			}

			.wechat {
				background-color: #fff;
				border-radius: 0;
				padding: 0;
				font-size: 14px;
				color: #666;

				padding-right: 22px;

			}


			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;

			.link {}
		}
	}
}
</style>
